<script setup lang="ts">
import { computed } from "vue";
import { QTd, QItem, QItemSection, QItemLabel } from "quasar";

import { ExtOrder, ExtOwner } from "qqlx-core";
import { getTime, getTimeAgo } from "qqlx-cdk";

import { ComAvatar } from "../ComAvatar";

const vueProps = defineProps<{
  entity: ExtOwner & Pick<ExtOrder, "contractTime">;
  label?: string;
}>();

const labelFinal = computed(() => {
  const label = vueProps.label || "合同";
  const result = {
    label: `${label} = ${getTimeAgo(Number(vueProps.entity.contractTime))}`,
    isFuture: false,
  };

  const isFuture = Number(vueProps.entity.contractTime) > Date.now();
  if (isFuture) {
    result.label = `未来的${label}`;
    result.isFuture = true;
  }
  return result;
});

const isFuture = computed(() => {
  return Number(vueProps.entity.contractTime) > Date.now();
});
</script>

<template>
  <q-td>
    <q-item dense class="px-0 pr-2 py-0.5">
      <q-item-section avatar class="pr-0 min-w-10">
        <ComAvatar :user="vueProps.entity.justOwner" :size="30" label-pre="管理员：" />
      </q-item-section>
      <q-item-section class="text-caption text-secondary">
        <q-item-label>{{ getTime(Number(vueProps.entity.contractTime)).text_full }}</q-item-label>
        <q-item-label :class="{ 'text-accent font-bold': labelFinal.isFuture }">{{ labelFinal.label }}</q-item-label>
      </q-item-section>
    </q-item>
  </q-td>
</template>
